


new Vue({
    el : '#container-1',
    data : {
        playAndStopButton   : 'glyphicon glyphicon-play',

        // 歌曲信息
        musicSrc            : '../src/audio/沙龙 - 陈奕迅.mp3',
        musicName           : '沙龙',
        musicAutor          : '陈奕迅',
        musicNameAndAutorArea : '1',

        // 进度条
        progressBarPlayed   : '0',
        progressBarDotHidden: '0',
        progressBarDotLeft  : '0',
        dotDown             : false,

        // 图片切换
        musicImg1Class      : 'img-2',
        musicImg2Class      : 'img-right-hidden',
        musicImg3Class      : 'img-right-hidden',

        // 歌曲时间
        musicCurrentTime    : '00:00', 
        musicTime           : '00:00',
        musicTimer          : null,

        // 歌词
        musicTimeArray      : [],
        musicLyricsArray    : [],
        scrollBarYTop       : '0',
        lyricsI             : 1,
        lyricsTop           : '0',
        lyricsPHeight       : document.getElementById('music-lyrics').getElementsByTagName('p')[0].offsetHeight,
        lyricsTimer         : null,

        // 列表
        musicHistory        : [],
        musicList           : ['沙龙 - 陈奕迅','许廷铿 - 厌弃','银临 - 棠梨煎雪'],
        musicListShow       : false,
        isHistoryList       : false,

        // 其它
        currentMusic        : 0,
        imgSrcs             : ['','','']
        
    },
    methods : { 
        // 上一首 + 播放
        lastMusic : function(){
            if(!this.isEmpty(this.musicHistory)){

                // 重新设定数据
                this.resetMusic();

                // 在历史列表中拿取歌名 并重新设置歌曲路径
                var musicName = this.musicHistory.pop();
                this.$refs.audio.src = '../src/audio/' +musicName +'.mp3';

                // 重新加载歌词 重新记录当前歌曲编号
                if(musicName === '沙龙 - 陈奕迅'){
                    this.musicInitialize(lyricsFromshalong);
                }else if(musicName === '许廷铿 - 厌弃'){
                    this.musicInitialize(lyricsFromyanqi);
                }else if(musicName === '银临 - 棠梨煎雪'){
                    this.musicInitialize(lyricsFromtanglijianxue)
                }


                // 获取的上一曲图片的名字用于图片切换动画
                if(this.musicImg1Class === 'img-1' || this.musicImg2Class === 'img-1' || this.musicImg3Class === 'img-1'){
                    var musicImgs = document.getElementById('music-imgs');
                    var lastImg   = musicImgs.getElementsByTagName('img')[0];
                    this.lastChangeAnimate(lastImg.name);
                }else if(this.musicImg1Class === 'img-2'){
                    this.imgSrcs[0] = '../src/image/' +musicName +'.jpg'
                }else if(this.musicImg2Class === 'img-2'){
                    this.imgSrcs[1] = '../src/image/' +musicName +'.jpg'
                }else if(this.musicImg3Class === 'img-2'){
                    this.imgSrcs[2] = '../src/image/' +musicName +'.jpg'
                }
                

                
                // 清除计时器，避免开启多个计时器
                this.doPlay();
            }else{

            }
            
        },
        
        MusicList : function(){
            this.musicListShow = !this.musicListShow;
        },


        // 切换音乐时重置数据
        resetMusic : function(){
            document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI-1].style.opacity = '0.4';
            this.lyricsI = 1;
            this.progressBarPlayed = 0;
            this.progressBarDotLeft = 0;
            this.scrollBarYTop  = 0;
            this.lyricsTop = 0;
        },

        // 歌曲列表与历史列表的切换
        showMusicList : function(){
            this.isHistoryList = false;
        },

        showHistoryList : function(){
            this.isHistoryList = true;
        },

        // 下一首 +立即播放
        nextMusic : function(){

            // 重新设定数据
            document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI-1].style.opacity = '0.4';
            this.lyricsI = 1;
            this.progressBarPlayed = 0;
            this.progressBarDotLeft = 0;
            this.scrollBarYTop  = 0;
            this.lyricsTop = 0;

            // 把上一首歌曲名放入到历史列表数组中
            this.musicHistory.push(this.musicList[this.currentMusic]);
            
            
            // 重新设置音乐文件路径
            if(this.currentMusic === 2){
                this.currentMusic = 0;
            }else{
                this.currentMusic++;
            }            
                       
            this.$refs.audio.src = '../src/audio/' +this.musicList[this.currentMusic] +'.mp3';

            // 重新装载歌词
            if(this.currentMusic === 0){
                this.musicInitialize(lyricsFromshalong);
            }else if(this.currentMusic === 1){
                this.musicInitialize(lyricsFromyanqi);
            }else if(this.currentMusic === 2){
                this.musicInitialize(lyricsFromtanglijianxue);
            }

            // 图片切换的判断
            // 是否有上一首判断
            if(this.musicImg1Class === 'img-1' || this.musicImg2Class === 'img-1' || this.musicImg3Class === 'img-1'){
                // 是否有上一首判断 是的 true
                if(this.musicImg1Class === 'img-right-hidden'){
                    this.musicImg1Class = this.musicImg3Class;
                    this.musicImg3Class = this.musicImg2Class;
                    this.musicImg2Class = 'img-left-hidden';
                    this.imgSrcs[0]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg2Class === 'img-right-hidden'){
                    this.musicImg2Class = this.musicImg1Class;
                    this.musicImg1Class = this.musicImg3Class;
                    this.musicImg3Class = 'img-left-hidden';
                    this.imgSrcs[1]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg3Class === 'img-right-hidden'){
                    this.musicImg3Class = this.musicImg2Class;
                    this.musicImg2Class = this.musicImg1Class;
                    this.musicImg1Class = 'img-left-hidden';  
                    this.imgSrcs[2]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }

                var musicImgs = document.getElementById('music-imgs');
                var lastImg   = musicImgs.getElementsByTagName('img')[0];
                
                lastImg.remove();

                if(this.musicImg1Class === 'img-left-hidden'){
                    this.musicImg1Class = 'img-right-hidden';
                }else if(this.musicImg2Class === 'img-left-hidden'){
                    this.musicImg2Class = 'img-right-hidden';
                }else if(this.musicImg3Class === 'img-left-hidden'){
                    this.musicImg3Class = 'img-right-hidden';
                }
                musicImgs.appendChild(lastImg);

                 // 是否有上一首判断 是的 true  End
            }else{
                // 是否有上一首判断 不是 false
                if(this.musicImg1Class === 'img-2'){
                    this.musicImg1Class = 'img-1';
                    this.musicImg2Class = 'img-2';
                    this.imgSrcs[1]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg2Class === 'img-2'){
                    this.musicImg2Class = 'img-1';
                    this.musicImg3Class = 'img-2';
                    this.imgSrcs[2]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg3Class === 'img-2'){
                    this.musicImg3Class = 'img-1';
                    this.musicImg1Class = 'img-2';
                    this.imgSrcs[0]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }

                 // 是否有上一首判断 不是 true
            }

            clearInterval(this.musicTimer);
            clearInterval(this.lyricsTimer);
            this.doPlay();
        },


        // 在列表中切歌
        changeMusicFromList : function(e){
            // 重新设定数据
            document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI-1].style.opacity = '0.4';
            this.lyricsI = 1;
            this.progressBarPlayed = 0;
            this.progressBarDotLeft = 0;
            this.scrollBarYTop  = 0;
            this.lyricsTop = 0;

            // 把上一首歌曲名放入到历史列表数组中
            this.musicHistory.push(this.musicList[this.currentMusic]);


            // 重新设置音乐文件路径
            this.currentMusic = e.target.getAttribute('number');
                    
            this.$refs.audio.src = '../src/audio/' +e.target.getAttribute('name') +'.mp3';

            // 重新装载歌词
            if(this.currentMusic === 0){
                this.musicInitialize(lyricsFromshalong);
            }else if(this.currentMusic === 1){
                this.musicInitialize(lyricsFromyanqi);
            }else if(this.currentMusic === 2){
                this.musicInitialize(lyricsFromtanglijianxue);
            }

            // 图片切换的判断
            // 是否有上一首判断
            if(this.musicImg1Class === 'img-1' || this.musicImg2Class === 'img-1' || this.musicImg3Class === 'img-1'){
                // 是否有上一首判断 是的 true
                if(this.musicImg1Class === 'img-right-hidden'){
                    this.musicImg1Class = this.musicImg3Class;
                    this.musicImg3Class = this.musicImg2Class;
                    this.musicImg2Class = 'img-left-hidden';
                    this.imgSrcs[0]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg2Class === 'img-right-hidden'){
                    this.musicImg2Class = this.musicImg1Class;
                    this.musicImg1Class = this.musicImg3Class;
                    this.musicImg3Class = 'img-left-hidden';
                    this.imgSrcs[1]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg3Class === 'img-right-hidden'){
                    this.musicImg3Class = this.musicImg2Class;
                    this.musicImg2Class = this.musicImg1Class;
                    this.musicImg1Class = 'img-left-hidden';  
                    this.imgSrcs[2]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }

                var musicImgs = document.getElementById('music-imgs');
                var lastImg   = musicImgs.getElementsByTagName('img')[0];
                
                lastImg.remove();

                if(this.musicImg1Class === 'img-left-hidden'){
                    this.musicImg1Class = 'img-right-hidden';
                }else if(this.musicImg2Class === 'img-left-hidden'){
                    this.musicImg2Class = 'img-right-hidden';
                }else if(this.musicImg3Class === 'img-left-hidden'){
                    this.musicImg3Class = 'img-right-hidden';
                }
                musicImgs.appendChild(lastImg);

                // 是否有上一首判断 是的 true  End
            }else{
                // 是否有上一首判断 不是 false
                if(this.musicImg1Class === 'img-2'){
                    this.musicImg1Class = 'img-1';
                    this.musicImg2Class = 'img-2';
                    this.imgSrcs[1]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg2Class === 'img-2'){
                    this.musicImg2Class = 'img-1';
                    this.musicImg3Class = 'img-2';
                    this.imgSrcs[2]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg3Class === 'img-2'){
                    this.musicImg3Class = 'img-1';
                    this.musicImg1Class = 'img-2';
                    this.imgSrcs[0]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }

                // 是否有上一首判断 不是 true
            }

            clearInterval(this.musicTimer);
            clearInterval(this.lyricsTimer);
            this.doPlay();
        },
        // 在列表中切歌 End


        // 在列表中切歌 在历史列表中切歌 —— 未完成
        changeMusicFromHistory : function(){
            // 重新设定数据
            this.resetMusic();

            // 重新设置音乐文件路径
            this.currentMusic = e.target.getAttribute('number');                    
            this.$refs.audio.src = '../src/audio/' +e.target.getAttribute('name') +'.mp3';

            // 重新装载歌词
            if(this.currentMusic === 0){
                this.musicInitialize(lyricsFromshalong);
            }else if(this.currentMusic === 1){
                this.musicInitialize(lyricsFromyanqi);
            }else if(this.currentMusic === 2){
                this.musicInitialize(lyricsFromtanglijianxue);
            }

            // 图片切换的判断
            // 是否有上一首判断
            if(this.musicImg1Class === 'img-1' || this.musicImg2Class === 'img-1' || this.musicImg3Class === 'img-1'){
                // 是否有上一首判断 是的 true
                if(this.musicImg1Class === 'img-right-hidden'){
                    this.musicImg1Class = this.musicImg3Class;
                    this.musicImg3Class = this.musicImg2Class;
                    this.musicImg2Class = 'img-left-hidden';
                    this.imgSrcs[0]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg2Class === 'img-right-hidden'){
                    this.musicImg2Class = this.musicImg1Class;
                    this.musicImg1Class = this.musicImg3Class;
                    this.musicImg3Class = 'img-left-hidden';
                    this.imgSrcs[1]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg3Class === 'img-right-hidden'){
                    this.musicImg3Class = this.musicImg2Class;
                    this.musicImg2Class = this.musicImg1Class;
                    this.musicImg1Class = 'img-left-hidden';  
                    this.imgSrcs[2]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }

                var musicImgs = document.getElementById('music-imgs');
                var lastImg   = musicImgs.getElementsByTagName('img')[0];
                
                lastImg.remove();

                if(this.musicImg1Class === 'img-left-hidden'){
                    this.musicImg1Class = 'img-right-hidden';
                }else if(this.musicImg2Class === 'img-left-hidden'){
                    this.musicImg2Class = 'img-right-hidden';
                }else if(this.musicImg3Class === 'img-left-hidden'){
                    this.musicImg3Class = 'img-right-hidden';
                }
                musicImgs.appendChild(lastImg);

                // 是否有上一首判断 是的 true  End
            }else{
                // 是否有上一首判断 不是 false
                if(this.musicImg1Class === 'img-2'){
                    this.musicImg1Class = 'img-1';
                    this.musicImg2Class = 'img-2';
                    this.imgSrcs[1]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg2Class === 'img-2'){
                    this.musicImg2Class = 'img-1';
                    this.musicImg3Class = 'img-2';
                    this.imgSrcs[2]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }else if(this.musicImg3Class === 'img-2'){
                    this.musicImg3Class = 'img-1';
                    this.musicImg1Class = 'img-2';
                    this.imgSrcs[0]   = '../src/image/' +this.musicList[this.currentMusic] +'.jpg';
                }

                // 是否有上一首判断 不是 true
            }

            clearInterval(this.musicTimer);
            clearInterval(this.lyricsTimer);
            this.doPlay();
        },
         // 在列表中切歌 在历史列表中切歌 —— 未完成 End

        // 播放时歌词的动画
        lyricsAnimate : function(){

            if(this.$refs.audio.currentTime > this.musicTimeArray[this.lyricsI]){
                var lyricsDivHeight  = document.getElementById('music-lyrics').getElementsByTagName('div')[0].offsetHeight;
                // console.log('lyricsAnimate is running');
                this.scrollBarYTop = (this.lyricsI*this.lyricsPHeight)/lyricsDivHeight*100 +'%';
                if(this.lyricsI >=6 ){
                    this.lyricsTop = - (this.lyricsPHeight)*(this.lyricsI-5) +'px'; 
                }
                document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI-1].style.opacity = '0.4';
                document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI].style.opacity = '1';
                this.lyricsI++;
            }
            
        },

        
        // 点击图片播放/暂停/播放上一曲
        controlMusicOfImg : function(e){
            if(e.target.className === 'img-1 transition-all'){

                this.lastChangeAnimate(e.target.name);
                this.lastMusic();
            }else if(e.target.className === 'img-2 transition-all'){
                this.playAndStop();
            }
            
        },
 

        // 图片转换上一曲动画
        lastChangeAnimate : function(imgName){
            if(imgName === 'img1'){
                this.musicImg1Class = 'img-2';
                this.musicImg2Class = 'img-right-hidden';

            }else if(imgName === 'img2'){
                this.musicImg2Class = 'img-2';
                this.musicImg3Class = 'img-right-hidden'; 
            }else if(imgName === 'img3'){
                this.musicImg3Class = 'img-2';
                this.musicImg1Class = 'img-right-hidden'; 
            }
        },
            

        // 快进与倒退
        // 点击快进或后退
        changeMusicCurrent : function(mouse){
            if(this.$refs.audio.src !== ''){
                clearInterval(this.musicTimer);
                clearInterval(this.lyricsTimer);
                this.progressBarPlayed = mouse.pageX - this.$refs.progressBarPlayed.getBoundingClientRect().left +'px';
                this.progressBarDotLeft = this.progressBarPlayed;
                this.$refs.audio.currentTime = ((parseInt(this.progressBarPlayed) / this.$refs.musicTime.clientWidth))*this.$refs.audio.duration;
                this.musicTimer = setInterval(this.progressBarPlayedAnimate,1000);
                
                document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI-1].style.opacity = '0.4';
                this.lyricsI = 0;
                for(var i in this.musicTimeArray){
                    if(this.$refs.audio.currentTime >= this.musicTimeArray[i]){
                        this.lyricsI++;
                    }else{
                        var lyricsDivHeight  = document.getElementById('music-lyrics').getElementsByTagName('div')[0].offsetHeight;
                        document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI-1].style.opacity ='1';
                        this.scrollBarYTop = (this.lyricsI*this.lyricsPHeight)/lyricsDivHeight*100 +'%';
                        this.lyricsTop = - (this.lyricsPHeight)*(this.lyricsI-5) +'px';
                        this.lyricsTimer = setInterval(this.lyricsAnimate,1000);
                        break;
                    }
                }
            }  
        },

         // 播放时进度条的动画
         progressBarPlayedAnimate : function(){
            
            if(this.$refs.audio.paused){
                clearInterval(this.musicTimer);
                return;
            }
            // console.log('progressBarPlayedAnimate is running');
            var min = parseInt(this.$refs.audio.currentTime/60);
            var sec = parseInt(this.$refs.audio.currentTime%60);
            if(min < 10){
                min = '0' +min;
            }
            if(sec < 10){
                sec = '0' +sec;
            }
            this.musicCurrentTime =min +':' +sec;

            var hoursec = parseInt(this.$refs.audio.duration%60);
            if(hoursec < 10){
                hoursec = '0' +hoursec;
            }
            this.musicTime =parseInt(this.$refs.audio.duration/60) +':' +hoursec;
            
            this.progressBarPlayed = (this.$refs.audio.currentTime / this.$refs.audio.duration) *100;
            this.progressBarPlayed = this.progressBarPlayed +'%';
            this.progressBarDotLeft =  this.progressBarPlayed;
        },


        // 拉动进度条事件
        // 在小圆点按下鼠标左键，执行进度条事件的前提 
        dotMouseDown : function(mouse){
            this.dotDown = true;
            clearInterval(this.musicTimer);
            this.dotOldLeft = mouse.pageX;
        },

        dotMouseMove : function(mouse){
            // 点下后进度条的回应，未执行快进、倒退事件
            if(this.dotDown && mouse.pageX > this.$refs.progressBarPlayed.getBoundingClientRect().left && mouse.pageX < this.$refs.progressBarPlayed.getBoundingClientRect().left +this.$refs.musicTime.clientWidth){     
                this.progressBarPlayed = mouse.pageX - this.$refs.progressBarPlayed.getBoundingClientRect().left +'px';
                this.progressBarDotLeft = this.progressBarPlayed;
            }
        },

        dotMouseOut : function(){
        },

        // 执行快进、倒退
        dotMouseUp : function(){
            
            if(this.dotDown){
                this.dotDown = false;

                clearInterval(this.musicTimer);
                clearInterval(this.lyricsTimer);

                this.musicTimer = setInterval(this.progressBarPlayedAnimate,1000);
                this.$refs.audio.currentTime = (this.$refs.progressBarPlayed.clientWidth / this.$refs.musicTime.clientWidth)*this.$refs.audio.duration;

                // 把高亮的歌词还原
                document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI-1].style.opacity = '0.4';
                
                this.lyricsI = 0;
                for(var i in this.musicTimeArray){
                    if(this.$refs.audio.currentTime >= this.musicTimeArray[i]){
                        // 定位当前时间歌词的位置
                        this.lyricsI++;
                    }else{
                        var lyricsDivHeight  = document.getElementById('music-lyrics').getElementsByTagName('div')[0].offsetHeight;
                        document.getElementById('music-lyrics').getElementsByTagName('p')[this.lyricsI-1].style.opacity ='1';
                        this.scrollBarYTop = (this.lyricsI*this.lyricsPHeight)/lyricsDivHeight*100 +'%';
                        this.lyricsTop = - (this.lyricsPHeight)*(this.lyricsI-5) +'px';
                        this.lyricsTimer = setInterval(this.lyricsAnimate,1000);
                        break;
                    }
                }
            }
           
        },


        // 进度条中的小圆点显示与消失
        progressBarDotShowFunction : function(){
            this.progressBarDotHidden = '1';
        },

        progressBarDotHiddenFunction : function(){
            this.progressBarDotHidden = '0';
        },
        // 快进与倒退 End


        // 播放、暂停、停止播放、播放结束
        playAndStop : function(event){
            if(this.$refs.audio.src === ''){
                this.$refs.audio.src = this.musicSrc;
            }
            
            if(this.$refs.audio.paused){
                // 进行播放
                if(this.musicTimer != null){
                    clearInterval(this.musicTimer);
                }
                this.doPlay();
            }else{
                // 进行暂停
               this.doPause();
            }
        },

        // 播放
        doPlay : function(){

            document.getElementById('music-lyrics').getElementsByTagName('p')[0].style.opacity = '1';
            this.playAndStopButton = 'glyphicon glyphicon-pause';
            this.$refs.audio.play();
            
            // 避免开启多个计时器
            clearInterval(this.musicTimer);
            clearInterval(this.lyricsTimer);

            
            this.musicTimer = setInterval(this.progressBarPlayedAnimate,1000);
            this.lyricsTimer = setInterval(this.lyricsAnimate,1000);
        },

        // 暂停
        doPause : function(){
            clearInterval(this.musicTimer);
            clearInterval(this.lyricsTimer);
            this.playAndStopButton = 'glyphicon glyphicon-play';
            this.$refs.audio.pause();
        },

        // 停止播放
        over : function(){
            clearInterval(this.musicTimer)        
            this.doPause();
            this.progressBarPlayed = 0;
            this.progressBarDotLeft = 0;
        },

        // 播放结束
        playOver : function(){
            this.progressBarPlayed = 0;
            this.playAndStopButton = 'glyphicon glyphicon-play';
            clearInterval(this.musicTimer);
            clearInterval(this.lyricsTimer);
            this.playAndStopButton = 'glyphicon glyphicon-play';
        },

        
        // 播放、暂停、停止播放、播放结束 End

        // 歌词加载、歌名加载、作者加载
        musicInitialize : function(lyricsText){
            lyricsBag.lyricsLoader(lyricsText);
            this.musicAutor = lyricsBag.getMusicAutor();
            this.musicName = lyricsBag.getMusicName();
            this.musicTimeArray = lyricsBag.getMusicTimeArray();
            this.musicLyricsArray = lyricsBag.getMusicLyrics();
        },
        
        // 判断数组是否为空
        isEmpty : function(arry){
            for(var i in arry){
                return false;
            }
            return true;
        }

    },


    // vue初始化完成后获取歌词
    beforeMount : function(){
        
        this.musicInitialize(lyricsFromshalong);
        this.imgSrcs[0] = '../src/image/沙龙 - 陈奕迅.jpg';
    }
});

        // changeMusicNameAndAutor : function(musicSrc){

        //     musicSrc = musicSrc.split('/');
        //     musicSrc = musicSrc[musicSrc.length-1];
        //     musicSrc = musicSrc.split('.')[0];
        //     musicSrc = musicSrc.split(' - ');

        //     this.musicAutor = musicSrc[0];
        //     this.musicName = musicSrc[1];
        // },